<template>
  <div>
    <!-- 编辑楼栋信息的对话框 -->
    <el-form ref="editedUnitForm" :model="editedUnitForm" :rules="rules" label-width="80px">

      <el-form-item label="楼栋" prop="address">
        <el-select v-model="editedUnitForm.buildingId" placeholder="请选择">
          <el-option v-for="item in buildingName" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="单元名称" prop="unitCode">
        <el-input v-model="editedUnitForm.unitCode"></el-input>
      </el-form-item>

      <el-form-item label="楼层" prop="floor">
        <el-input v-model="editedUnitForm.floor"></el-input>
      </el-form-item>

      <el-form-item label="单元物品" prop="publicProperty">
        <el-select v-model="editedUnitForm.publicProperty" multiple placeholder="请选择">
          <el-option v-for="item in publicProperty" :key="item" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item align="center">
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button type="info" @click="resetForm">清 除</el-button>
      </el-form-item>

    </el-form>


  </div>
</template>

<script>
export default {
  data() {
    return {
      housemaster: [],// 存储从后端获取的宿管数据
      editedUnitForm: {
        buildingId: '',//楼栋ID
        unitId: '',//单元号
        unitCode: '',//单元名称
        floor: '',//楼层
        publicProperty: "",//单元物品
      },
      publicProperty: [
        {
          value: "洗衣机",
          label: "洗衣机"
        },
        {
          value: "吹风机",
          label: "吹风机"
        },
        {
          value: "洗鞋机",
          label: "洗鞋机"
        },
      ],
      buildingName: [],//楼栋集合
      rules: {
        buildingName: [{required: true, message: '请输入楼栋名称', trigger: 'blur'}],
        unitCode: [{required: true, message: '请输入单元名称', trigger: 'blur'}],
        floor: [{required: true, message: '请输入楼层', trigger: 'blur'}],
      }
    };
  },
  mounted() {
    //   查询楼栋信息
    this.queryBuildingInformation();
  },
  methods: {
    // 查询楼栋信息
    queryBuildingInformation() {
      // 调用后端接口获取数据
      this.$axios.post('/api/buildings/list', {}, {headers: {'token': this.$store.getters.getToken}}).then(response => {
        // 请求成功后更新表格数据和分页信息
        if (response.data.code === 200) {
          // 使用 reduce 构建以 userId 为键，name 为值的对象
          this.buildingName = response.data.data.reduce((arr, user) => {
            // 将当前用户的 userId 作为键，name 作为值，添加到累积的数组中
            arr.push({value: user.buildingId, label: user.buildingName});
            return arr;
          }, []);
        } else {
          this.$message.error(response.data.msg || '查询楼栋信息失败');
        }
      }).catch(error => {
        this.$message.error(error || '查询楼栋信息失败');
      });
    },
    // 提交单元表
    submitForm() {
      this.$refs.editedUnitForm.validate(valid => {
        if (valid) {
          // 构建单元信息对象
          const requestBody = {
            buildingId: this.editedUnitForm.buildingId, // 楼栋id
            unitCode: this.editedUnitForm.unitCode,//单元名称
            floor: this.editedUnitForm.floor,//楼层
            publicProperty: this.editedUnitForm.publicProperty.join(',')//单元物品
          };
          // 发送 POST 请求
          this.$axios.post('/api/units/add', requestBody, {
            headers: {
              'token': this.$store.getters.getToken
            }
          })
              .then(response => {
                this.resetForm();
                // 自定义一个事件，使其能够添加成功之后自动隐藏！
                this.$emit('unitsAdded');
                // 处理登录成功的情况，比如保存用户信息到本地存储或者跳转到其他页面
                if (response.data.code === 200) {
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  });
                } else {
                  this.$message.error(response.data.msg || '添加单元失败');
                }
              })
              .catch(error => {
                this.resetForm();
                // 自定义一个事件，使其能够添加成功之后自动隐藏！
                this.$emit('unitsAdded');
                // 处理错误情况
                this.$message({
                  message: '添加失败',
                  type: 'error'
                });
              });
        } else {
          return false;
        }
      });
    },
    // 重置表单
    resetForm() {
      this.$refs.editedUnitForm.resetFields();
    },
  }
};
</script>

<style scoped>
/* 样式可以根据实际需要进行调整 */
</style>
